<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1">


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />



  <meta name="description" content="Webpack基础篇"/>




  <meta name="keywords" content="Webpack," />





  <link rel="alternate" href="/default" title="刘粉丝来了">






<link rel="canonical" href="http://yoursite.com/2020/05/06/BuildTheFoundation/"/>


<meta name="description" content="Webpack的核心概念 entry：入口 output：输出 loader：模块转换器，用于把模块原内容按照需求转换成新内容 插件( plugins )：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者做想要做的事情   接下来利用Webpack搭建一个项目   1、初始化一个项目使用  npm init -y 2、要使用 webpack，那么必然需要安装 webpa">
<meta property="og:type" content="article">
<meta property="og:title" content="Webpack基础篇">
<meta property="og:url" content="http://yoursite.com/2020/05/06/BuildTheFoundation/index.html">
<meta property="og:site_name" content="刘粉丝来了">
<meta property="og:description" content="Webpack的核心概念 entry：入口 output：输出 loader：模块转换器，用于把模块原内容按照需求转换成新内容 插件( plugins )：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者做想要做的事情   接下来利用Webpack搭建一个项目   1、初始化一个项目使用  npm init -y 2、要使用 webpack，那么必然需要安装 webpa">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-05-06T15:21:17.000Z">
<meta property="article:modified_time" content="2020-05-06T15:56:08.912Z">
<meta property="article:author" content="刘粉丝来了">
<meta property="article:tag" content="Webpack">
<meta name="twitter:card" content="summary">


<link rel="stylesheet" type="text/css" href="/css/style.css?v=1.1" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>





<script type="text/javascript">
  var themeConfig = {
    fancybox: {
      enable: false
    },
  };
</script>




  



    <title> Webpack基础篇 - 刘粉丝来了 </title>
  <meta name="generator" content="Hexo 4.2.0"></head>

  <body>
    <div id="page">
      <header id="masthead"><div class="site-header-inner">
    <h1 class="site-title">
        <a href="/." class="logo">刘粉丝来了</a>
    </h1>

    <nav id="nav-top">
        
            <ul id="menu-top" class="nav-top-items">
                
                    <li class="menu-item">
                        <a href="/">
                            
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/archives">
                            
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/tags">
                            
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li class="menu-item">
                        <a href="/about">
                            
                            
                                About
                            
                        </a>
                    </li>
                
            </ul>
        
  </nav>
</div>

      </header>
      <div id="content">
        
    <div id="primary">
        
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          Webpack基础篇
        
      </h1>

      <time class="post-time">
          5月 06 2020
      </time>
    </header>



    
            <div class="post-content">
            <h3 id="Webpack的核心概念"><a href="#Webpack的核心概念" class="headerlink" title="Webpack的核心概念"></a><strong>Webpack的核心概念</strong></h3><ul>
<li>entry：入口</li>
<li>output：输出</li>
<li>loader：模块转换器，用于把模块原内容按照需求转换成新内容</li>
<li>插件( plugins )：扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或者做想要做的事情</li>
</ul>
<blockquote>
<p>接下来利用Webpack搭建一个项目 </p>
</blockquote>
<p>1、初始化一个项目使用  <font color=red >npm init -y</font></p>
<p>2、要使用 webpack，那么必然需要安装 webpack、webpack-cli</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli -D</span><br></pre></td></tr></table></figure>

<p>3、使用 <font color=red >npx webpack –mode=development</font> 进行构建，默认是 production 模式，我们为了更清楚得查看打包后的代码，使用 development 模式。</p>
<h3 id="将js转义为低版本"><a href="#将js转义为低版本" class="headerlink" title="将js转义为低版本"></a><strong>将js转义为低版本</strong></h3><p>首先安装一下 babel-loader</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-loader -D</span><br></pre></td></tr></table></figure>
<p>此外，我们还需要配置 babel，为此我们安装一下以下依赖:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel&#x2F;core @babel&#x2F;preset-env @babel&#x2F;plugin-transform-runtime -D</span><br><span class="line"></span><br><span class="line">npm install @babel&#x2F;runtime @babel&#x2F;runtime-corejs3</span><br></pre></td></tr></table></figure>
<p>接下来创建webpack.config.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="built_in">module</span>:&#123;</span><br><span class="line">        rules:[</span><br><span class="line">            &#123;</span><br><span class="line">                test:<span class="regexp">/\.jsx?$/</span>,</span><br><span class="line">                use:[<span class="string">'babel-loader'</span>],</span><br><span class="line">                exclude:<span class="regexp">/node_modules/</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

            </div>
          

    
      <footer class="post-footer">
		
		<div class="post-tags">
		  
			<a href="/tags/Webpack/">Webpack</a>
		  
		</div>
		

        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2020/06/11/mongodb/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">mongodb</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2020/05/03/resume/">
        <span class="next-text nav-default">测试</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

        
  <div class="comments" id="comments">
    
  </div>


      </footer>
    
  </article>


    </div>

      </div>

      <footer id="colophon"><script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
<span class="copyright-year" style="width:100%; display:flex; justify-content: space-between;">
    <span>
        
        &copy;
    
        2014 -
    
    2020
    <span class="footer-author">刘粉丝来了.</span>
    <span class="power-by">
        由 <a class="hexo-link" href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> and <a class="theme-link" href="https://github.com/frostfan/hexo-theme-polarbear" target="_blank" rel="noopener">Polar Bear</a> 强力驱动
    </span>
    </span>
    <span id="busuanzi_container_site_pv">
        本站总访问量<span id="busuanzi_value_site_pv" style="color:red">24280</span>次
    </span>
</span>



      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>
    


    




  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  

    <script type="text/javascript" src="/js/src/theme.js?v=1.1"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=1.1"></script>


  </body>
</html>
